<template>
	<view class="changePassword">
		<login-navigation-bar title="修改初始密码"></login-navigation-bar>
		<view class="changePasswordBox default-bgcolor">
			<bottomRect type="login"></bottomRect>
			<view class="changePasswordForm">
				<!-- 标题 -->
				<view class="title main-font-color font-weight-bold">
					<text>请修改初始密码，</text>
					<text>以免被他人登录使用</text>
				</view>
				<!-- 表单 -->
				<form @submit="changePassword">
					<view class="newPassword">
						<text class="main-font-color font-weight-bold">新密码</text>
						<input :password="!eyeFlag1" v-model="newPassword" @input="checkPasswordLegal(1)"
							placeholder-class="input" placeholder="请输入新密码">
						<text class="newPasswordNotice" v-show="!isPasswordCorrect1">*密码8-16位且至少同时包含字母、数字、特殊字符</text>
						<uni-icons class="isLookable" :type="[eyeFlag1==true ?'eye':'eye-slash']" color="#999999"
							size="24" @click="changeLookPassword(1)"></uni-icons>
					</view>
					<view class="confirmNewPassword">
						<text class="main-font-color font-weight-bold">再次确认新密码</text>
						<input name="newPassword" :password="!eyeFlag2" v-model="confirmPassword"
							@input="checkPasswordLegal(2)" placeholder-class="input" placeholder="请再次输入新密码">
						<text class="confirmPasswordNotice" v-show="!isPasswordCorrect2">*密码不一致</text>
						<uni-icons class="isLookable" :type="[eyeFlag2==true ?'eye':'eye-slash']" color="#999999"
							size="24" @click="changeLookPassword(2)"></uni-icons>
					</view>
					<!-- 确定和跳过按钮 -->
					<button :class="[canChangePassword?'btnConfirm':'disable']" hover-class="confirmClick"
						:disabled="!canChangePassword" form-type="submit">确定</button>
					<button class="btnSkip" hover-class="skipClick" @click="btnSkip">跳过</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import loginNavigationBar from '@/components/login_navigationBar/login_navigationBar.vue'
	import bottomRect from '@/components/bottomRect/bottomRect.vue'
	
	const app = getApp()

	export default {
		name: 'changePassword',
		components: {
			loginNavigationBar,
			bottomRect
		},
		data() {
			return {
				// 新密码
				newPassword: '',
				// 再次确认的密码
				confirmPassword: '',
				// 眼睛的样式变换
				eyeFlag1: false,
				eyeFlag2: false,
				// 密码是否合法2
				isPasswordCorrect1: true,
				isPasswordCorrect2: true,
				// 确定按钮是否可以用
				canChangePassword: false
			}
		},
		methods: {
			// 修改密码
			changePassword(e) {
				const student_ID = app.globalData.userInfo.profile.student_ID
				// console.log(e);
				uni.showLoading({
					title: '更改中...'
				})
				wx.cloud.callFunction({
					name: 'change_password',
					data: {
						student_ID,
						password: e.detail.value.newPassword
					}
				}).then(res => {
					// 如果更改成功
					if (res.result.stats.updated) {
						uni.navigateTo({
							url: '/pages/login/initialUserInfo'
						})
						uni.hideLoading()
					}else{
						uni.showToast({
							title:'网络错误，请重新提交',
							icon:'none'
						})
					}
				})
			},

			// 跳过按钮
			btnSkip() {
				uni.navigateTo({
					url: '/pages/login/initialUserInfo'
				})
			},

			// 切换密码是否可见
			changeLookPassword(num) {
				if (num == 1) {
					this.eyeFlag1 = !this.eyeFlag1
				} else {
					this.eyeFlag2 = !this.eyeFlag2
				}
			},

			// 检查密码是否合法
			checkPasswordLegal(num) {
				// 正则判断式
				const reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,16}$/i
				if (num == 1) {
					const result = reg.test(this.newPassword)
					if (this.newPassword == '' || result) {
						this.isPasswordCorrect1 = true
					} else {
						this.isPasswordCorrect1 = false
					}
				} else {
					// const result = reg.test(this.confirmPassword)
					if (this.confirmPassword == this.newPassword) {
						this.isPasswordCorrect2 = true
					} else {
						this.isPasswordCorrect2 = false
					}
				}
				this.canUChangePassword()
			},

			// 判断按钮是否可用
			canUChangePassword() {
				if (this.newPassword != '' && this.confirmPassword != '' && this.confirmPassword == this.newPassword &&
					this.isPasswordCorrect1 == true && this.isPasswordCorrect2 == true) {
					this.canChangePassword = true
				} else {
					this.canChangePassword = false
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	// input的placeholder样式
	/deep/ .input {
		font-size: 32rpx;
		color: #999999;
	}

	// 按钮弃用样式
	.disable {
		background-color: #7db1ff;
		color: white;
		width: 580rpx;
		height: 90rpx;
		margin-bottom: 40rpx;
		border-radius: 16rpx;
	}

	.isLookable {
		position: absolute;
		top: 70rpx;
		left: 90%;
		z-index: 10;
	}

	.changePasswordBox {
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;

		.changePasswordForm {
			overflow: hidden;
			background-color: white;
			width: 700rpx;
			height: 1000rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 8px #b8b8b8;
			margin-top: -90rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				display: flex;
				flex-direction: column;
				font-size: 50rpx;
				margin-top: 80rpx;
				width: 580rpx;
				margin-bottom: 30rpx;
			}

			.newPassword {
				position: relative;
				width: 580rpx;
				margin-bottom: 80rpx;

				text {
					font-size: 40rpx;
				}

				input {
					border-bottom: 1rpx solid #EFEFEF;
					padding: 14rpx 0;
					font-size: 36rpx;
				}

				.newPasswordNotice {
					position: absolute;
					color: #E65F59;
					font-size: 32rpx;
				}
			}

			.confirmNewPassword {
				position: relative;
				width: 580rpx;
				margin-bottom: 80rpx;

				text {
					font-size: 40rpx;
				}

				input {
					border-bottom: 1rpx solid #EFEFEF;
					padding: 14rpx 0;
					font-size: 36rpx;
				}

				.confirmPasswordNotice {
					position: absolute;
					color: #E65F59;
					font-size: 32rpx;
				}
			}

			button::after {
				border: none;
			}

			.btnConfirm {
				width: 580rpx;
				height: 90rpx;
				background-color: #007aff;
				color: white;
				margin-bottom: 40rpx;
				border-radius: 16rpx;
			}

			.btnSkip {
				width: 580rpx;
				height: 90rpx;
				background-color: #edf1fd;
				color: #007aff;
				border-radius: 16rpx;
			}

			// 按钮点击效果
			.confirmClick {
				background-color: #0062cc;
			}

			.skipClick {
				background-color: #DBE0F2;
			}
		}
	}
</style>
